module MC.Order {
	export class Table {
		public constructor(select: JQuery) { 
			this._select=select;
			
		}

		private _select:JQuery=null;

		public init(){
			let conText=`<div class="sizelistDiv">
            	<ul class="sizeul"></ul>
				 <div class="buttondiv sizedivbtn">
				`;
				if(this.hangText){
					conText+='<a class="button setColor">'+this.hangText+'</a>';
				}
				if(this.lieText){
					conText+='<a class="button setSize">'+this.lieText+'</a>';
				}
				conText+='</div></div>';

			let content = $(conText);

			this._select.append(content);
			this.content = content;

			this.content.find('.setColor').on('click', () => {
				MC.msg.selsctTag(this.gethang(), (str:string)=>{
					this.getDataJson();
					this.sethang(str);
					this.create();
				});
			});
			this.content.find('.setSize').on('click', () => {
				MC.msg.selsctTag(this.getlie(), (str:string)=>{
					this.getDataJson();
					this.setlie(str);
					this.create();
				});
			});
		}


		public hangText:any='自定义颜色';
		public lieText:any='自定义大小';
		public readOnly=false;
		private content: JQuery = null;
		private hangArray: any = [];
		private liegArray: any = [];
		public sethang(hang: string) {
			this.hangArray = hang.split(',');
		}
		public setlie(lie: string) {
			this.liegArray = lie.split(',');
		}

		public gethang() {
			return this.hangArray.join(',');
		}
		public getlie() {
			return this.liegArray.join(',');
		}


		public create() {
			this.content.find('.sizeul').html('');
			let content = this.content;
			let tophtml = `<li class="liv top clearfix">
                    <div class="left inputDiv"></div>`;
			for (let i = 0; i < this.hangArray.length; i++) {
				tophtml += `<div class="inputDiv">
						`+ this.hangArray[i] + `
                    </div>`;
			}
			tophtml += `</li>`;
			content.find('.sizeul').append(tophtml);

			for (let c = 0; c < this.liegArray.length; c++) {
				let lihtml = `<li class="liv clearfix">
					<div class="left inputDiv">`+ this.liegArray[c] + `</div>`;
				for (let i = 0; i < this.hangArray.length; i++) {
					lihtml += `<div class="inputDiv">
								<input type="number" class="val" color="`+ this.hangArray[i] + `" size="` + this.liegArray[c] + `"/>
							</div>`;
				}
				lihtml += `</li>`;
				content.find('.sizeul').append(lihtml);
			}
			if(this.readOnly){
				content.find('.sizeul input').attr('readonly','readonly');
				content.find('.sizedivbtn').remove();
			}
			this.upView();
		}
		private DataObjList: any = [];
		public setData(data: string) {
			let json = JSON.parse(data);
			this.sethang(json.color);
			this.setlie(json.size);
			this.DataObjList = json.data;
			this.upView();
		}
		public upView() {
			for (let i = 0; i < this.DataObjList.length; i++) {
				let one = this.DataObjList[i];
				this.content.find('[color=' + one.c + '][size=' + one.s + ']').val(one.v);
			}
		}

		/** 获取表格数据 */
		public getDataJson() {
			let list = this.content.find('.liv input.val');
			let obj = [];
			for (let i = 0; i < list.length; i++) {
				let one = $(list[i]);
				if (one.val() !== '') {
					obj.push({
						c: one.attr('color'),
						s: one.attr('size'),
						v: one.val()
					});
				}
			}
			this.DataObjList=obj;
			return JSON.stringify({
				color: this.gethang(),
				size: this.getlie(),
				data: obj
			});
		}

	}
}